<style>
    .n-statistic__label{
        font-size: 18px !important;
        font-weight: bold !important;
        color: black !important;
    }
</style>
{!! $modal !!}
<div id="vue-basic-index"></div>
<script>
    Dcat.ready(function () {
        const { ref, onMounted, watch, unref } = Vue;
        window.appInit("#vue-basic-index", {
            template: `
                <n-spin size="large" :show="spinShow">

                    <n-space vertical>
                        <n-space justify="space-between" style="margin: 0 30px">
                            <n-statistic label="门店数量">
                                <span class="text-info">{{ $agent['shop_count'] }}</span>
                            </n-statistic>
                            <n-statistic label="总洗车交易量">
                                <span class="text-info">{{ $orderCount }}</span>
                            </n-statistic>
                            <n-statistic label="总洗车营业额">
                                <span class="text-info">{{ $orderPrice }}</span>
                            </n-statistic>
                            <n-statistic label="可提现金额">
                                <n-space vertical>
                                    <span class="text-info">{{ $agent['money'] }}</span>
                                    <!--                                        <span  style="cursor: pointer;">-->
                                    <!--                                          <button class="btn btn-primary btn-sm" @click="showModal=true">提现申请</button>-->
                                    <!--                                        </span>-->
                                </n-space>
                            </n-statistic>
                            <n-statistic label="提现申请金额">
                                <n-space vertical>
                                    <span class="text-info">{{ $cash_money }}</span>
                                </n-space>
                            </n-statistic>
                            <n-statistic label="已提现金额">
                                <span class="text-info">{{ $agent['used_money'] }}</span>
                            </n-statistic>
                        </n-space>
                        <n-p style="margin:15px auto;">
                            <n-space justify="center" align="center">
                                <n-radio-group v-model:value="type">
                                    <n-radio-button v-for="date in dates" :key="date.value" :value="date.value" :label="date.label"></n-radio-button>
                                </n-radio-group>
                                <n-date-picker v-if="type==='custom'" v-model:value="range" type="daterange" clearable></n-date-picker>
                            </n-space>
                        </n-p>
                        <div class="p-1">
                            <n-table>
                              <n-thead><n-tr><n-th>门店</n-th><n-th>洗车交易量</n-th><n-th>洗车交易额</n-th></n-tr></n-thead>
                              <n-tbody>
                                <template v-for="item in items">
                                    <n-tr ><n-td>@{{item.name}}</n-td><n-td>@{{item.orders_count}}</n-td><n-td>@{{item.orders_sum}}</n-td></n-tr>
                                </template>
                              </n-tbody>
                            </n-table>
<!--                            <n-descriptions label-align="center" label-placement="top" bordered :column="9">-->
<!--                                <template v-for="item in items">-->
<!--                                    <n-descriptions-item :label="item.label"><h4 class="text-center" ><span class="label bg-primary" v-text="item.value"></span></h4></n-descriptions-item>-->
<!--                                </template>-->
<!--                            </n-descriptions>-->
                        </div>
                    </n-space>
                    {{--<n-modal--}}
                    {{--    v-model:show="showModal"--}}
                    {{--    preset="dialog"--}}
                    {{--    title="提现申请"--}}
                    {{--    size="huge"--}}
                    {{--    :bordered="false"--}}
                    {{--    style="width: 600px"--}}
                    {{-->--}}
                    {{--    <div>--}}
                    {{--        <n-row>--}}
                    {{--            <n-col :span="8" style="text-align: center">--}}
                    {{--                <n-statistic label="可提现金额">--}}
                    {{--                    <span class="text-info">{{ $agent['money'] }}</span>--}}
                    {{--                </n-statistic>--}}
                    {{--            </n-col>--}}
                    {{--            <n-col :span="8" style="text-align: center">--}}
                    {{--                <n-statistic label="提现申请金额">--}}
                    {{--                    <span class="text-info">{{ $cash_money }}</span>--}}
                    {{--                </n-statistic>--}}
                    {{--            </n-col>--}}
                    {{--            <n-col :span="8" style="text-align: center">--}}
                    {{--                <n-statistic label="已提现金额">--}}
                    {{--                    <span class="text-info">{{ $agent['used_money'] }}</span>--}}
                    {{--                </n-statistic>--}}
                    {{--            </n-col>--}}
                    {{--        </n-row>--}}
                    {{--        <div class="mt-2">--}}
                    {{--            <n-form-item ref="amountRef" label="提现金额" :rule="rule" label-placement="left">--}}
                    {{--                <n-input-number v-model:value="amount" :step="0.01" :min="0.1" clearable />--}}
                    {{--            </n-form-item>--}}
                    {{--        </div>--}}
                    {{--    </div>--}}
                    {{--    <template #action>--}}
                    {{--        <n-button type="info" @click="onSubmit">提交</n-button>--}}
                    {{--    </template>--}}
                    {{--</n-modal>--}}
                </n-spin>
            `,
            setup() {
                const dates = ref([
                    { label:"总的",value:"all"},
                    { label:"昨天",value:"yesterday"},
                    { label:"今天",value:"today"},
                    { label:"本周",value:"week"},
                    { label:"本月",value:"month"},
                    { label:"本季度",value:"quarter"},
                    { label:"本年",value:"year"},
                    { label:"自定义区间",value:"custom"},
                ])
                const type = ref("all")
                const items = ref([]);
                const ranks = ref([]);
                const amountRef = ref(null);
                const amount = ref(null);
                const spinShow = ref(false);
                const showModal = ref(false);
                const range = ref(null);
                const getBasicTime = ()=>{
                    spinShow.value = true;
                    $.ajax({
                        url:"{{url('agent/basic/range')}}",
                        method:"POST",
                        data: { range:range.value, type: type.value },
                        success:(res)=>{
                            items.value = res.data.items;
                            spinShow.value = false;
                        },
                        error:(error)=>{
                            spinShow.value = false;
                        }
                    })
                }
                onMounted(()=> {
                    getBasicTime()
                })
                watch(()=>range.value,()=>getBasicTime())
                watch(()=>type.value,()=>getBasicTime())
                // https://xiche.jianzhan580.com/shop/dcat-api/form
                const rule = {
                    trigger: ['input', 'blur'],
                    validator () {
                        if (!amount.value) {
                            return new Error("请输入提现金额!")
                        }
                    }
                }
                const onSubmit = ()=>{
                    unref(amountRef).validate().then(()=>{
                        $.ajax({
                            url:"{{url('agent/basic/cash')}}",
                            method:"POST",
                            data: { amount:amount.value },
                            success:(res)=>{
                                if(res.status){
                                    Dcat.success(res.data.message)
                                    showModal.value = false;
                                    amount.value = null;
                                }else{
                                    Dcat.error(res.data.message)
                                }
                            },
                            error:(error)=>{
                                console.log(error)
                            }
                        })
                    })
                }
                return {
                    dates,
                    items,
                    ranks,
                    spinShow,
                    range,
                    type,
                    showModal,
                    rule,
                    amount,
                    amountRef,
                    onSubmit
                }
            }
        })
    })
</script>

